<template>
    <div class="common-layout">
        <el-header class="fixed-navbar">
            <div class="navbar-content">
                <div class="logo">
                    <img src="@/assets/image.png" alt="Logo">
                    <span class="brand-text">智慧园区</span>
                </div>
                <div class="nav-links">
                    <!-- <span @click="goTo('/school/home')" :class="{ 'active': currentRoute === '/school/home' }">首页</span> -->
                    <!-- <span @click="goTo('/school/backstage')" :class="{ 'active': currentRoute === '/school/backstage' }">信息维护</span> -->
                    <span @click="goTo('/school/center/schoolPreview')" :class="{ 'active': currentRoute === '/school/center/schoolPreview' }" class="personal-center">后台管理</span>
                    <span @click="goTo('/index')" :class="{ 'active': currentRoute === '/index' }">返回首页</span>
                </div>
            </div>
        </el-header>
        <el-main><router-view></router-view></el-main>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
    data() {
        return {
            currentRoute: '' // 存储当前路由路径
        };
    },
    methods: {
        goTo(route: string) {
            this.$router.push(route);
            this.currentRoute = route; // 更新当前路由路径
        }
    }
});
</script>

<style scoped>
/* Add styles as needed */
.fixed-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: 	#0066FF;
    z-index: 1000; /* 使导航栏位于其他内容之上 */
    padding: 10px 25px; /* 可根据需要调整导航栏的内边距 */
    color: #fff
}

.navbar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo img {
    width: 40px; /* 调整 Logo 的宽度 */
    margin-right: 10px;
}

.brand-text {
    font-size: 20px; /* 调整字体大小 */
    margin-bottom: 26px; /* 调整距离下边界的距离 */
    display: inline-block;
    vertical-align: middle;
}
.nav-links{
    /* margin-bottom:15px; */
    padding:0 2% 2%;
}
.nav-links span {
    padding-bottom: 2%;
    cursor: pointer;
    font-size: 20px; /* 调整字体大小 */
    /* margin-right: 80px; 调整导航链接之间的距离 */
    /* margin-bottom: 26px !important; 调整距离下边界的距离 */
}

.nav-links span:not(:last-child) {
    margin-right: 50px; /* 调整导航链接之间的距离 */
    /* margin-bottom: 26px !important; 调整距离下边界的距离 */
}

.active {
    color: #fff8e5; /*当链接处于活动状态时，字体颜色变为红色*/
    border-bottom: #fff8e5 5px solid;
    /* box-shadow: 0 0 10px #4a5259; */
}

.personal-center {
    margin-right: 50px; /* Add margin to the right of "个人中心" link */
}

</style>
